.table-first {
  display: flex;
  .bus-img {
    position: relative;
    float: left;
    width: 60px;
    height: 60px;
    border-radius: 4px;
    border: 1px solid $--color-primary;
    overflow: hidden;
    background: #f8f8f8;
    img {
      position: absolute;
      display: block;
      top: 50%;
      left: 50%;
      width: 60px;
      transform: translate(-50%, -50%);
    }
  }
  .msg-list {
    width: 400px;
    margin-left: 20px;
    float: left;
    li {
      text-align: left;
      line-height: 28px;
      word-wrap: break-word;
      word-break: break-all;
      overflow: hidden;
      &.name {
        font-size: 15px;
        font-weight: 600;
      }
      &.text{
        color: #676565;
        span {
          margin: 0 5px;
          color: $--color-primary;
          font-weight: bold;
        }
      }
    }
  }
}
.table-second {
  width: 300px;
  li {
    text-align: left;
    line-height: 28px;
    &.st1{
      font-size: 14px;
      font-weight: bold;
    }
    &.st2{
      color: #676565;
      span.cur {
        color: $--color-primary;
      }
    }
  }
}

.table-third span {
  padding: 0 2px;
  border: 1px solid #999;
  font-weight: 600;
  color: #999;
  &.st1 {
    border: 1px solid #1ac423;
    color: #1ac423;
  }
  &.st2 {
    border: 1px solid #01a0e1;
    color: #01a0e1;
  }
  &.st3 {
    border: 1px solid #fe982a;
    color: #fe982a;
  }
  &.st4 {
    border: 1px solid #29c734;
    color: #29c734;
  }
}
